<template>
  <div v-loading="pageLoading" :class="{'mobile-setting-main': showMobilePage}" class="setting-main">
    <div v-if="fieldItems && fieldItems.length" class="setting-list">
      <div class="tree-content">
        <el-tree
          ref="tagTree"
          :data="fieldItems"
          :props="defaultProps"
          :default-expanded-keys="defaultExpandedKeys"
          :expand-on-click-node="true"
          node-key="pid">
          <div v-loading="getLoadingStatus(node)" slot-scope="{ node, data }" class="custom-tree-node">
            <template v-if="node.level < data.level">
              <div class="expend-btn">
                <img v-if="!node.isLeaf && !node.expanded" :src="expend" class="expend-icon" alt="">
                <img v-if="!node.isLeaf && node.expanded" :src="expend_active" class="expend-icon" alt="">
                <img v-if="node.isLeaf" :src="expend_active_no" class="expend-icon" alt="">
              </div>
              <div class="tree-main ellipsisOne flex-center">
                <div v-if="!data._isEdit && !data._isAdd" class="ellipsisOne" >
                  <el-tooltip :open-delay="800" placement="top">
                    <div slot="content" style="max-width: 200px;">{{ node.label }}</div>
                    <div class="ellipsisOne">{{ node.label }}</div>
                  </el-tooltip>
                </div>
                <!-- 编辑 -->
                <div v-if="data._isEdit && !data._isAdd" class="ellipsisOne" @click.prevent.stop="() => {}">
                  <el-input v-model="data.editName" :maxlength="50" size="small" class="input" placeholder="请输入内容" >
                    <div slot="suffix" class="el-input__icon">
                      <i class="el-icon-check" @click.stop="httpEditSetting(node,data)" />
                      <i class="el-icon-close" @click.stop="toEditSetting('', data, false, true, false)" />
                    </div>
                  </el-input>
                </div>
                <!-- 新增 -->
                <div v-if="data._isAdd && !data._isEdit" class="ellipsisOne" @click.prevent.stop="() => {}">
                  <el-input v-model="data.name" :maxlength="50" size="small" class="input" placeholder="请输入内容" >
                    <div slot="suffix" class="el-input__icon">
                      <i class="el-icon-check" @click.stop="httpAddSetting(node, data)" />
                      <i class="el-icon-close" @click.stop="cancelAdd(node, data)" />
                    </div>
                  </el-input>
                </div>
                <!-- 模块选择 -->
                <el-tooltip :open-delay="800" placement="top">
                  <div slot="content" style="max-width: 200px;">{{ getModuleNames(data.moduleIds) }}</div>
                  <el-select
                    v-if="data.level === 3 && node.level === 2"
                    v-model="data.moduleIds"
                    :disabled="!data._isAdd && !data._isEdit"
                    :style="{ cursor: !data._isAdd && !data._isEdit ? 'default' : 'pointer' }"
                    multiple
                    size="small"
                    class="tag-module-select"
                    collapse-tags
                    clearable>
                    <el-option
                      v-for="item in modules"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"/>
                  </el-select>
                </el-tooltip>
              </div>
              <div class="setting-btn-container" @click.prevent.stop="() => {}">
                <div v-if="node.level < data.level && node.level !== 2" class="btn" @click.prevent.stop="toAddSetting(node, data)">添加</div>
                <template v-if="node.level !== 1 && data.canOperate">
                  <div style="margin-right: 10px">
                    <span style="color: #999">移动至</span>
                    <el-select :value="getCurrIndex(data) + 1" size="small" style="width: 60px;" placeholder="请选择" @change="handleRowChange(data, $event - 1)">
                      <el-option
                        v-for="(item, index) in fieldItems[0].item"
                        :key="index"
                        :label="index + 1"
                        :value="index + 1"/>
                    </el-select>
                  </div>
                  <!-- 向上 -->
                  <div title="向上移">
                    <i v-if="getOrderIndex(data, true)" class="index-icon el-icon-top" @click.prevent.stop="changeRowIndex(data, true)"/>
                    <i v-else class="index-icon el-icon-top" style="color:#999;cursor:not-allowed;" />
                  </div>
                  <!-- 向下 -->
                  <div title="向下移">
                    <i v-if="getOrderIndex(data, false)" class="index-icon el-icon-bottom" @click.prevent.stop="changeRowIndex(data, false)"/>
                    <i v-else class="index-icon el-icon-bottom" style="color:#999;cursor:not-allowed;" />
                  </div>
                  <!-- 置顶 -->
                  <div title="置顶" class="flex-center">
                    <img v-if="getOrderIndex(data, true)" :src="toBottomActive" class="index-icon whirl-icon" @click.prevent.stop="handleRowChange(data, 0)">
                    <img v-else :src="toBottom" class="index-icon whirl-icon" style="cursor:not-allowed;">
                  </div>
                  <!-- 置底 -->
                  <div title="置底" class="flex-center">
                    <img v-if="getOrderIndex(data, false)" :src="toBottomActive" class="index-icon" @click.prevent.stop="handleRowChange(data, fieldItems[0].item.length - 1)">
                    <img v-else :src="toBottom" class="index-icon" style="cursor:not-allowed;">
                  </div>
                  <template v-if="data._isEdit">
                    <div class="btn" @click.prevent.stop="httpEditSetting(node, data)">保存</div>
                    <div class="btn cancel-btn" @click.prevent.stop="toEditSetting('', data, false, true, false)">取消</div>
                  </template>
                  <template v-else>
                    <div class="btn" @click.prevent.stop="toEditSetting(data.name, data, !data._isEdit, true, false)">编辑</div>
                    <div class="btn del-btn" @click.prevent.stop="deleteSetting(node, data)">删除</div>
                  </template>
                </template>
                <template v-else-if="data._isAdd">
                  <div class="btn" @click.prevent.stop="httpAddSetting(node, data)">保存</div>
                  <div class="btn cancel-btn" @click.prevent.stop="cancelAdd(node, data)">取消</div>
                </template>
              </div>
            </template>
            <!-- 标签列表 -->
            <div v-else class="tag-list">
              <draggable
                v-model="data.tagsList"
                v-bind="dragOptions"
                handle=".draggable-move"
                @end="draggableChange">
                <transition-group :data-parent-id="node.parent.data.id" type="transition" class="draggable-item-list">
                  <template v-if="data.tagsList.length">
                    <div v-for="(i, index) in data.tagsList" :key="index" :data-id="i.id" class="tag-item">
                      <!-- 新增 -->
                      <div v-loading="tagLoading" v-if="i._isAdd && !i._isEdit" element-loading-background="#eff3fb" class="tree-main" @click.prevent.stop="() => {}">
                        <el-input v-model="i.name" :maxlength="50" size="small" class="tag-input" placeholder="请输入内容" >
                          <div slot="suffix" class="el-input__icon">
                            <i class="el-icon-check" @click.stop="httpAddSetting(node, i)" />
                            <i class="el-icon-close" @click.stop="cancelTag(data, index)" />
                          </div>
                        </el-input>
                      </div>
                      <!-- 编辑 -->
                      <div v-loading="tagLoading" v-else-if="i._isEdit && !i._isAdd" element-loading-background="#eff3fb" class="tree-main" @click.prevent.stop="() => {}">
                        <el-input v-model="i.editName" :maxlength="50" size="small" class="tag-input" placeholder="请输入内容" >
                          <div slot="suffix" class="el-input__icon">
                            <i class="el-icon-check" @click.stop="httpEditSetting(node,i)" />
                            <i class="el-icon-close" @click.stop="toEditSetting('', i, false, false, true)" />
                          </div>
                        </el-input>
                      </div>
                      <template v-else>
                        <div class="label-text draggable-move" @dblclick.stop="toEditSetting(i.name, i, !i._isEdit, false, true)">
                          <ToolTip :content="i.name"/>
                        </div>
                        <i class="el-icon-close icon" @click.stop="deleteSetting(node, i)" />
                      </template>
                    </div>
                  </template>
                  <template v-else>
                    <div v-for="i in 1" :key="i" class="placeholder-item draggable-move" />
                  </template>
                </transition-group>
              </draggable>
              <div class="add-tag" @click="toAddTag(node, data)">添加 <i class="el-icon-plus icon"/></div>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
    <div v-else style="font-size: 14px;color: #666;text-align:center;">
      <img :src="emptyImg" style="width: 120px;" class="empty-img" alt="">
      <div style="text-align:center;">暂无数据</div>
    </div>
  </div>
</template>
<script>
import { deleteSetting, editSetting, addSetting, queryTagReference } from '@/api/setting';
import { TAG_MODULES } from '@/utils/const';
import ElMessage from '@/utils/message';
import emptyImg from '@/assets/empty-table-data.png';
import { hasRouteAuth } from '@/utils/permission';
import { showModal } from '@/utils/message';
import draggable from 'vuedraggable';
import expend from '@/assets/setting/expend.png';
import expend_active from '@/assets/setting/expend-active.png';
import expend_active_no from '@/assets/setting/expend-active_no.png';
import toBottom from '@/assets/setting/to_bottom.png';
import toBottomActive from '@/assets/setting/to_bottom_active.png';
import { mapState } from 'vuex';

export default {
  components: { draggable },
  props: {
    fieldItems: {
      type: Array,
      default: () => {
        return [];
      }
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      emptyImg, expend, expend_active, expend_active_no,
      toBottom,
      toBottomActive,
      fieldData: [],
      loading: false,
      pageLoading: false,
      addLoading: false,
      tagLoading: false,
      defaultProps: {
        children: 'item',
        label: 'name'
      },
      tipMessage: null,
      onEditNode: false, // 存在正在编辑的节点
      onEditTag: false, // 存在正在编辑的标签
      storeModuleIds: {} // 暂存编辑的模块ids
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      };
    },
    modules() {
      return [
        { id: TAG_MODULES.GLOBAL, name: '全局通用' },
        { id: TAG_MODULES.CHANNEL, name: '渠道订单' },
        { id: TAG_MODULES.PROJECT, name: '项目订单' },
        { id: TAG_MODULES.PROJECT_CHANNEL, name: '项目渠道单' },
        { id: TAG_MODULES.IMAGE_AUTH, name: '商务订单' },
        // { id: TAG_MODULES.MARKET_AUTH, name: '营销授权' },
        { id: TAG_MODULES.RESOURCE, name: '账号资源' },
        { id: TAG_MODULES.SETTLE_CUSTOMER, name: '销售客户' },
        { id: TAG_MODULES.MENGLI_CUSTOMER, name: '萌力客户' },
        { id: TAG_MODULES.SETTLE_SUPPLIER, name: '销售供应商' },
        { id: TAG_MODULES.COMMERCE_SUPPLIER, name: '有赞供应商' },
        { id: TAG_MODULES.MENGLI_SUPPLIER, name: '萌力供应商' },
        { id: TAG_MODULES.PROCESS, name: '审批流程' },
        // { id: TAG_MODULES.SIGN_UP, name: '签约内审' },
        { id: TAG_MODULES.FLY_NOTICE, name: '飞来询单' },
        { id: TAG_MODULES.MINI_PROGRAM, name: '飞来通告小程序' }
      ];
    }
  },
  methods: {
    hasRouteAuth,
    // 获取树所有展开的节点
    getTreeNode() {
      const parentId = this.fieldItems[0].pid;
      const node = this.$refs['tagTree'].getNode(parentId);
      const result = [parentId];
      const nodeChildNodes = node.childNodes || [];
      nodeChildNodes.forEach(currNode => {
        currNode.expanded && result.push(currNode.data.pid);
      });
      return result;
    },
    getData() {
      const expandIds = this.getTreeNode();
      this.$emit('getData', expandIds);
      this.onEditNode = false;
      this.onEditTag = false;
    },
    getModuleNames(list) {
      if (!Array.isArray(list) || !list.length) return '请选择';
      const result = [];
      list.forEach(id => {
        const currModule = this.modules.filter(item => item.id === id);
        if (Array.isArray(currModule) && currModule.length) {
          result.push(currModule[0].name);
        }
      });
      return result.join('、');
    },
    // 新增字段
    toAddSetting(node, data) {
      if (this.onEditNode) {
        this.$message.warning('存在正在编辑的标签分类');
        return;
      }
      this.onEditNode = true;
      if (data.item && data.item.length > 0) {
        const hasAddItem = data.item.some(i => {
          return i._isAdd === true;
        });
        if (hasAddItem) return;
      }
      if (!node.expanded) this.$set(node, 'expanded', true);

      const newChild = { name: '', _isAdd: true, level: data.level, item: [], pid: data.pid, moduleIds: [-1] };
      // node.level 当前在哪一层
      // data.level 总共有几层
      if (!data.item) {
        this.$set(data, 'item', []);
      }
      data.item.unshift(newChild);
    },
    cancelAdd(node, data) {
      const parent = node.parent;
      const children = parent.data.item || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      this.onEditNode = false;
    },
    // 标签
    toAddTag(node, data) {
      if (this.onEditTag) {
        this.$message.warning('存在正在编辑的标签');
        return;
      }
      this.onEditTag = true;
      if (data.tagsList && data.tagsList.length) {
        // 已经有新增标签就不再添加数据
        const hasAddItem = data.tagsList.some(i => {
          return i._isAdd === true;
        });
        if (hasAddItem) return;
      }
      const newChild = { name: '', _isAdd: true, level: data.level, item: [], pid: data.pid };
      if (!data.tagsList) {
        this.$set(data, 'tagsList', []);
      }
      data.tagsList.push(newChild);
    },
    cancelTag(data, index) {
      data.tagsList.splice(index, 1);
      this.onEditTag = false;
    },
    httpAddSetting(node, data) {
      if (!data.name) {
        ElMessage.warning('请输入内容');
        return;
      }
      const root = this.getRoot(node);
      const params = {
        type: root.data.id,
        name: data.name
      };
      if (node.level > 2) {
        params.orderPlatformId = node.parent.data.id;
      } else {
        if (!data.moduleIds || !Array.isArray(data.moduleIds) || !data.moduleIds.length) {
          this.$message.warning('请选择标签所属模块');
          return;
        }
        params.moduleIds = data.moduleIds.join();
      }
      node.level > 2 ? this.tagLoading = true : this.addLoading = true;
      addSetting(params).then(res => {
        node.level > 2 ? this.tagLoading = false : this.addLoading = false;
        if (res.code === 200) {
          ElMessage.success('新增成功');
          this.$set(data, '_isAdd', false);
          this.$set(data, 'id', res.data);
          this.getData();
          node.level > 2 ? this.onEditTag = false : this.onEditNode = false;
        } else {
          ElMessage.success(res.message);
        }
      }).catch(err => {
        node.level > 2 ? this.tagLoading = false : this.addLoading = false;
        console.log(err);
        // ElMessage.error(err.message);
      });
    },
    // 新增字段 end
    // 编辑字段
    toEditSetting(name, data, type, isStoreModule = false, isTag = false) {
      if (!isTag && name && this.onEditNode) {
        this.$message.warning('存在正在编辑的标签分类');
        return;
      }
      if (isTag && name && this.onEditTag) {
        this.$message.warning('存在正在编辑的标签');
        return;
      }
      isTag ? this.onEditTag = true : this.onEditNode = true;
      if (name !== '') {
        this.$set(data, 'editName', name);
      }
      this.$set(data, '_isEdit', type);
      if (isStoreModule) {
        if (name) {
          // 暂存编辑前模块的值
          this.$set(this.storeModuleIds, data.pid, data.moduleIds);
        } else {
          // 取消编辑赋值原始值
          this.$set(data, 'moduleIds', this.storeModuleIds[data.pid]);
        }
      }
      if (!name) {
        isTag ? this.onEditTag = false : this.onEditNode = false;
      }
    },
    httpEditSetting(node, data) {
      if (!data.editName) {
        ElMessage.warning('请输入内容');
        return;
      }
      const root = this.getRoot(node);
      const params = {
        type: root.data.id,
        id: data.id,
        name: data.editName || data.name
      };
      if (node.level > 2) {
        params.orderPlatformId = node.parent.data.id;
      } else {
        if (!data.moduleIds || !Array.isArray(data.moduleIds) || !data.moduleIds.length) {
          this.$message.warning('请选择标签所属模块');
          return;
        }
        params.moduleIds = data.moduleIds.join();
      }
      node.level > 2 ? this.tagLoading = true : this.addLoading = true;
      editSetting(params).then(res => {
        node.level > 2 ? this.tagLoading = false : this.addLoading = false;
        if (res.code === 200) {
          ElMessage.success('修改成功');
          this.$set(data, '_isEdit', false);
          this.$set(data, 'name', params.name);
          this.getData();
          node.level > 2 ? this.onEditTag = false : this.onEditNode = false;
        } else {
          ElMessage.success(res.message);
        }
      }).catch(err => {
        node.level > 2 ? this.tagLoading = false : this.addLoading = false;
        console.log(err);
        // ElMessage.error(err.message);
      });
    },
    // 编辑字段 end
    deleteSetting(node, data) {
      queryTagReference(data.id).then(res => {
        const isReference = res.data && res.data.result || false;
        const tipText = isReference ? node.level > 2 ? '该标签已被引用，是否确定删除？' : '该标签分类下存在被引用标签，是否确定删除？' : '是否确定删除？';
        showModal(tipText).then(_ => {
          const root = this.getRoot(node);
          const params = {
            type: root.data.id,
            id: data.id,
            name: data.name
          };
          if (node.level > 2) {
            params.orderPlatformId = node.parent.data.id;
          }
          if (!data._isAdd) {
            deleteSetting(params).then(res => {
              if (res.code === 200) {
                ElMessage.success('删除成功');
                this.getData();
              } else {
                ElMessage.error(res.message);
              }
            }).catch(err => {
              console.error(err);
            });
          }
        }).catch(_ => null);
      });
    },
    getRoot(node) {
      if (!node) return null;
      if (node.level === 1) {
        return node;
      }
      return this.getRoot(node.parent);
    },
    getOrderIndex(data, isTop = false) {
      const treeData = this.fieldItems && this.fieldItems[0] && this.fieldItems[0].item || [];
      if (!treeData.length) return;
      return data.name !== (isTop ? treeData[0].name : treeData[treeData.length - 1].name);
    },
    // 上下移
    changeRowIndex(data, toTop = false) {
      const index = this.getCurrIndex(data);
      if (index === -1) return;
      const arr = this.fieldItems[0].item.splice(index, 1);
      this.$nextTick(() => {
        if (toTop) {
          this.fieldItems[0].item.splice(index - 1, 0, arr[0]);
        } else {
          this.fieldItems[0].item.splice(index + 1, 0, arr[0]);
        }
      });
      const params = {
        id: data.id,
        name: data.name
      };
      params.moveToIndex = toTop ? index - 1 : index + 1;
      this.orderCallback(params);
    },
    // 移动至指定位置
    handleRowChange(data, targetIndex) {
      const index = this.getCurrIndex(data);
      if (index === -1) return;
      const arr = this.fieldItems[0].item.splice(index, 1);
      this.$nextTick(() => {
        this.fieldItems[0].item.splice(targetIndex, 0, arr[0]);
      });
      const params = {
        id: data.id,
        name: data.name
      };
      params.moveToIndex = targetIndex + 1;
      this.orderCallback(params);
    },
    getCurrIndex(data) {
      const treeData = this.fieldItems && this.fieldItems[0] && this.fieldItems[0].item || [];
      return treeData.findIndex(item => item.name === data.name);
    },
    draggableChange(customEventDom) {
      const timer = setTimeout(() => {
        const { newIndex, oldIndex, newDraggableIndex, oldDraggableIndex } = customEventDom;
        const fromParentId = customEventDom.from.dataset.parentId;
        const toParentId = customEventDom.to.dataset.parentId;
        if (newIndex === oldIndex && newDraggableIndex === oldDraggableIndex && fromParentId === toParentId) {
          return;
        }
        const params = {};
        params.moveToIndex = newIndex; // 拖拽后标签排序
        const currHandleTag = customEventDom.to.children[newIndex]; // 拖拽的标签
        params.name = currHandleTag.innerText; // 拖拽的标签名称
        params.id = currHandleTag.dataset.id; // 拖拽的标签id
        params.orderPlatformId = customEventDom.to.dataset.parentId; // 拖拽至目标位置的一级标签id
        this.orderCallback(params);
        clearTimeout(timer);
      }, 17);
    },
    orderCallback(params) {
      params.type = this.fieldItems[0].id;
      this.pageLoading = true;
      editSetting(params).then(res => {
        this.pageLoading = false;
        if (res.code !== 200) {
          this.getData();
        } else {
          this.tipMessage && this.tipMessage.close();
          this.tipMessage = this.$message.success('操作成功');
        }
      }).catch(_ => {
        this.pageLoading = false;
        this.getData();
      });
    },
    getLoadingStatus(node) {
      return this.addLoading && node.level === 2 && (node.data._isEdit || node.data._isAdd);
    }
  }
};
</script>
<style lang="scss" scoped>
.setting-main {
  user-select: none;
  & ::v-deep {
    .el-tree {
      .el-tree-node {
        position: relative;
      }
      & > .el-tree-node {
        padding: 15px 1px;
        border-bottom: 1px solid #EBEEFD;
        position: relative;
        & > .el-tree-node__content {
          margin: 0;
        }
        &:nth-last-child(2) {
          border-bottom: none;
        }
      }
    }
    .el-tree-node__content {
      background-color: #fff;
      height: auto;
      min-height: 26px;
      padding: 8px 0;
      &:hover {
        background-color: #fff;
      }
      // &:last-child {
      //   margin-bottom: 10px;
      // }
    }
    .el-tree-node__expand-icon {
      // display: none;
      height: 100%;
      visibility: hidden;
      padding: 0;
      position: absolute;
      left: -12px;
      top: 0px;
      transform: rotate(0deg) !important;
    }

    .custom-tree-node {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 14px;
      ::v-deep .el-loading-spinner .circular {
        width: 25px;
        height: 25px;
        margin-top: 5px;
      }
      .row-highlight {
        background-color: pink;
      }
      .draggable-item-list {
        display: flex;
        flex-wrap: wrap;
      }
      .index-icon {
        font-size: 19px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        color: #406eff;
        margin-right: 10px;
      }
      .whirl-icon {
        transform: rotate(180deg);
      }
      .setting-btn-container {
        margin-left: 20px;
        display: flex;
        min-width: 300px;
        align-items: center;
        justify-content: flex-end;
        .btn {
          margin-left: 10px;
          color: #406eff;
          cursor: pointer;
        }
        .del-btn {
          color: red;
        }
        .cancel-btn {
          color: #999;
        }
        ::v-deep .el-input__inner {
          height: 24px;
        }
        ::v-deep .el-icon-arrow-up {
          margin-top: 5px;
        }
        ::v-deep .is-reverse {
          margin-top: -5px;
        }
      }
      .tag-module-select {
        min-width: 150px;
        margin-left: 12px;
        ::v-deep .el-tag > span {
          max-width: 80px;
        }
        .el-tag.el-tag--info {
          color: #406EFF !important;
          background-color: #EFF3FB !important;
        }
      }
      .tree-main {
        font-size: 14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:16px;
        flex: 1;
        // overflow-x: hidden;
        text-overflow: ellipsis;
        .el-icon-check {
          font-size: 15px;
          color: #406EFF;
        }
        .el-input__icon {
          width: 40px;
        }
        .el-icon-close {
          font-size: 15px;
        }
        & ::v-deep {
          .el-input {
            .el-input__inner {
              border-color: #DDDDDD;
            }
          }
          .el-input--suffix .el-input__inner {
            padding-right: 48px;
          }
        }
        .input {
          width: 240px;
          margin-right: 10px;
        }
      }
    }
    .expend-btn {
      width:16px;
      height:16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
    }
  }
}
.mobile-setting-main {
  ::v-deep {
    .el-tree-node__content {
      .setting-btn-container {
        min-width: unset;
      }
    }
    .el-tree-node__children {
      overflow-x: auto;
      .tree-main {
        min-width: 500px;
        flex: unset;
      }
    }
  }
}
.expend-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tree-main{
  &::v-deep{
    .el-input--suffix .el-input__inner{
      padding-right: 45px;
    }
  }
}
.tag-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 18px;
  .tag-item {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 28px;
    background: #eff3fb;
    border-radius: 2px;
    margin-right: 8px;
    cursor: auto;
    margin-bottom: 8px;
    .label-text {
      color: #333;
      font-size: 12px;
      max-width: 200px;
      user-select: none;
      cursor: move;
    }
    .icon {
      font-size: 13px;
      color: #999999;
      cursor: pointer;
      margin-left: 3px;
    }
  }
  .placeholder-item {
    cursor: move;
    width: 1px;
    height: 28px;
    background-color: transparent;
  }
  .add-tag {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 8px;
    height: 28px;
    color: #406EFF;
    cursor: pointer;
    font-size: 12px;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #406EFF;
    .icon {
      font-size: 14px;
      color: #406EFF;
      margin-left: 3px;
    }
  }
}
.tag-input {
  display: flex;
  align-items: center;
  &::v-deep {
    .el-input__inner {
      background-color: #eff3fb;
      font-size: 12px;
      padding: 0 !important;
      border: none;
      height: 100%;
      margin-right: 40px !important;
      width: 100px;
    }
    .el-input__suffix {
      display: flex;
      align-items: center;
    }
    .el-input__icon {
      line-height: 1.2;
      cursor: pointer;
    }
  }
}
</style>
